<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<link type="text/css" href="/css/start/jquery-ui-1.8.21.custom.css" rel="Stylesheet" />	
<link type="text/css" href="/css/1pxtable.css" rel="Stylesheet" />	
<script type="text/javascript" src="/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.8.21.custom.min.js"></script>
<script>
	$(function() {
		$( "#date_begin" ).datepicker({ dateFormat: "yy-mm-dd",firstDay: 1});
		$( "#date_end" ).datepicker({ dateFormat: "yy-mm-dd",firstDay: 1});
		$( ".date" ).datepicker({ dateFormat: "yy-mm-dd",firstDay: 1});
	});

	function calTotal(source){
		var id = $(source).attr('id');

		var sep = id.split("_");
		var adjH = 0;

		if(sep[2] == 'hour'){
				var h1 = $('#leave_start_hour_' + sep[3]).attr('value');
				var h2 = $('#leave_end_hour_' + sep[3]).attr('value');
				var m1 = $('#leave_start_min_' + sep[3]).attr('value');
				var m2 = $('#leave_end_min_'+ sep[3]).attr('value');

				if(m1 == m2){
					adjH = h2 - h1;
				}else{
					if(m1 == 0){
						adjH = h2 - h1 + 0.5;
					}else if (m2 == 0){
						adjH = h2 - h1 - 0.5;
					}
				}
				
				if(adjH >= 1){
					$('#leave_start_hour2_'+sep[3]).attr('value',h1); //set hour start
					$('#leave_end_hour2_'+sep[3]).attr('value',h2);	//set hour end

					$('#leave_start_min2_'+sep[3]).attr('value',m1); //set min start
					$('#leave_end_min2_'+sep[3]).attr('value',m2);	//set min end
				}else{
					alert('Minimum 1 hour');
				}

				
		}else{
				var h1 = $('#leave_start_hour_' + sep[3]).attr('value');
				var h2 = $('#leave_end_hour_' + sep[3]).attr('value');
				var m1 = $('#leave_start_min_' + sep[3]).attr('value');
				var m2 = $('#leave_end_min_'+ sep[3]).attr('value');


				if(m1 == m2){
					adjH = h2 - h1;
				}else{
					if(m1 == 0){
						adjH = h2 - h1 + 0.5;
					}else if (m2 == 0){
						adjH = h2 - h1 - 0.5;
					}

				}

				if(adjH >= 1){
					$('#leave_start_hour2_'+sep[3]).attr('value',h1); //set hour start
					$('#leave_end_hour2_'+sep[3]).attr('value',h2);	//set hour end

				
					$('#leave_start_min2_'+sep[3]).attr('value',m1); //set min start
					//$("#leave_end_min_" + sep[3] + " option[value = " + m1 + " ]").attr('selected',true);
					$('#leave_end_min2_'+sep[3]).attr('value',m2);	//set min end
				}else{
					alert('Minimum 1 hour');
					
				}

				
		}

		$('#leave_hr_'+sep[3]).attr('value',adjH);
		$('#leave_hr2_'+sep[3]).attr('value',adjH);
		
		
	}

	function check(source){
		var detail = $("#leave_comm").attr('value');

		  if(source.checked && detail.length > 3){
		  	$("#btn_save").prop('disabled', false);
		  }else{
			$("#btn_save").prop('disabled', true);
		  }
	}

	function lock(source){
		var id = $(source).attr('id');
		var abc = id.split("_");
	
		if(source.checked){

			$("#leave_hr_" + abc[1]).attr('value',8);
			$("#leave_hr2_" + abc[1]).attr('value',8);
			
			$('#leave_start_hour2_'+abc[1]).attr('value',09);
			$('#leave_start_min2_'+abc[1]).attr('value',0);
			$('#leave_end_hour2_'+abc[1]).attr('value',17);
			$('#leave_end_min2_'+abc[1]).attr('value',0);
			
		  	$("#leave_start_hour_"+abc[1]).prop('disabled', true);
		  	$("#leave_start_min_"+abc[1]).prop('disabled', true);
		  	$("#leave_end_hour_"+abc[1]).prop('disabled', true);
		  	$("#leave_end_min_"+abc[1]).prop('disabled', true);
		  	
			$("#leave_start_hour_" + abc[1] + " option[value = 09]").attr('selected',true);
			$("#leave_start_min_" + abc[1] + " option[value = 0]").attr('selected',true);
			$('#leave_end_hour_' + abc[1] + " option[value = 17]").attr('selected',true);
			$("#leave_end_min_" + abc[1] + " option[value = 0]").attr('selected',true);
			
		  }else{
			$("#leave_hr_" + abc[1]).attr('value',8);
			$("#leave_hr2_" + abc[1]).attr('value',8);
			  
			$('#leave_start_hour2_'+abc[1]).attr('value',09);
			$('#leave_start_min2_'+abc[1]).attr('value',0);
			$('#leave_end_hour2_'+abc[1]).attr('value',17);
			$('#leave_end_min2_'+abc[1]).attr('value',0);
				
			$("#leave_start_hour_" + abc[1] + " option[value = 09]").attr('selected',true);
			$("#leave_start_min_" + abc[1] + " option[value = 0]").attr('selected',true);
			$('#leave_end_hour_' + abc[1] + " option[value = 17]").attr('selected',true);
			$("#leave_end_min_" + abc[1] + " option[value = 0]").attr('selected',true);

			  
			$("#leave_start_hour_"+abc[1]).prop('disabled', false);
			$("#leave_end_hour_"+abc[1]).prop('disabled', false);
			$("#leave_start_min_"+abc[1]).prop('disabled', false);
		  }
	}
	
</script>
    
    
</head>

<body style="font-family:Arial, Helvetica, sans-serif;">

<h1>Online Leave Application Form For : <?php echo $this->staffName;?><br />
</h1>
<?php if(!$this->errorflag){?>
<form id="form1" name="form1" method="post" action="">
<?php if($this->check == true){
	  $dateBegin = $this->dateBegin;
      $dateEnd = $this->dateEnd;
		
      ?>
<input name="id_staff" type="hidden" id="id_staff" value="1" />
<input name="shop_code" type="hidden" id="shop_code" value="WHPC" />
  <table border="1" cellspacing="0" cellpadding="10" id = "tab">
    <tr>
      <th scope="col" >Peroid</th>
      <th scope="col" >Type Of Leave</th>
      <th scope="col" >Date of Leave</th>
      <th scope="col" >Full Day</th>
      <th scope="col" >Start Time</th>
      <th scope="col" >End Time</th>
      <th scope="col" width = "5">Hours</th>
    </tr>
      <?php $diff = Model_DatetimeHelper::dateDiff($dateBegin, $dateEnd);
      if($dateBegin <= '2015-04-06' && $dateEnd >= '2015-04-06'){
      		$diff --;
      }
      
      for($i = 0;$i <= $diff; $i++){?>
      <tr id = tr_<?php echo $i;?>>
      <td><?php echo $i+1;?></td>
      <td><label for="leave_type[<?php echo $i?>]"></label>
        <select name="leave_type[<?php echo $i?>]" id="leave_type[<?php echo $i?>]">
          <option selected="selected" value="" >-Please Select-</option>
          <option value="1">Annual Leave</option>
          <option value="2">Sick Leave</option>
          <option value="5">Event Leave</option>
      </select></td>
      <td><input type = "text" name = "date_time[<?php echo $i?>]" id = "date_time_<?php echo $i?>" value = "<?php echo Model_DatetimeHelper::adjustDays('add', $dateBegin, $i)?>" class = "date"></input></td> 
      <td>Yes<input type = "checkbox" id = "check_<?php echo $i?>" onclick = "lock(this)"></input></td>	
      <td><select  id = "leave_start_hour_<?php echo $i?>" onchange = "calTotal(this)">
      				<option value="" disabled selected style="display:none;">Please Select</option>
                    <option value="09">09</option>
                    <option value="10">10</option>
                    <option value="11">11</option>
                    <option value="12">12</option>
                    <option value="13">13</option>
                    <option value="14">14</option>
                    <option value="15">15</option>
                    <option value="16">16</option>
                    <option value="17">17</option>
      
      </select>:
      <input type = "hidden" name = "leave_start_hour[<?php echo $i?>]" id = "leave_start_hour2_<?php echo $i?>" value = ""></input>
      <select  id = "leave_start_min_<?php echo $i?>" onchange = "calTotal(this)">
                    <option value="0">00</option>
                    <option value="30">30</option>
      </select>
      <input type = "hidden" name = "leave_start_min[<?php echo $i?>]" id = "leave_start_min2_<?php echo $i?>" value = ""></input>
      </td>  
      
 	
       <td><select name = "leave_end_hour[<?php echo $i?>]" id = "leave_end_hour_<?php echo $i?>" onchange = "calTotal(this)">
                    <option value="09">09</option>
                    <option value="10">10</option>
                    <option value="11">11</option>
                    <option value="12">12</option>
                    <option value="13">13</option>
                    <option value="14">14</option>
                    <option value="15">15</option>
                    <option value="16">16</option>
                    <option value="17" selected>17</option>
      
      </select>:
      <input type = "hidden" name = "leave_end_hour[<?php echo $i?>]" id = "leave_end_hour2_<?php echo $i?>" value = "17"></input>
      <select  id = "leave_end_min_<?php echo $i?>" onchange = "calTotal(this)">
                    <option value="0">00</option>
                    <option value="30">30</option>
      </select>
      <input type = "hidden" name = "leave_end_min[<?php echo $i?>]" id = "leave_end_min2_<?php echo $i?>" value = ""></input>
      </td> 
      
      
      <td><input type = "text" id = "leave_hr_<?php echo $i?>" size = "3" disabled></input>
      	  <input type = "hidden" name = "leave_hr[<?php echo $i?>]" id = "leave_hr2_<?php echo $i?>" size = "3" class = "leave_h2"></input>	
      </td>
    </tr>
    <?php }?>
     <tr>
      <td colspan="7"><h4>
        <label for="leave_comm"></label>
        Purpose Of Leave</h4>
        <p>
          <textarea name="leave_comm" cols="100" rows="10" id="leave_comm" style="width:90%"></textarea>
       </p></td>
    </tr>
     <tr>
       <td colspan="7">Manager: <?php echo $this->manager?></td>
     </tr>
     <tr>
       <td colspan="7">&nbsp;</td>
     </tr>
     <tr>
       <td colspan="7"><strong>Staff Leave Policy</strong></td>
     </tr>
     <tr>
       <td colspan="7">&nbsp;</td>
     </tr>   
  </table>
  <br />
  <input name="checkbox" type="checkbox" id="checkbox" value="1" onclick = "check(this)"/>
  <label for="checkbox">I have double checked every details / time periods and confirm they are correct</label>
  <br />
<br />
  <input type="submit" name="btn_save" id="btn_save" disabled value="Notify Head Office,Apply For Leave" />
  <br />

<?php }else{ ?>
	<h3><span style = "color:red">Please Apply Before 14 Days</span></h3>
	<h3>Please Select Period</h3>
	Date Start:<input type = "text" name = "date_begin" id = "date_begin"></input> ~ 
	Date End:<input type = "text" name = "date_end" id = "date_end"></input><br/><br/>
	<input type = "submit" name = "submit" id = "submit" value = "Submit"></input>
	
<?php }?>
<?php }else{?>
<br />

<table width="500" border="0" cellspacing="0" cellpadding="10" align="left" style="border:#603 1px solid;">
  <tr>
    <td align="center" bgcolor="#FEDADD"><?=$this->errorMessage ?></td>
    <td><a href="javascript:history.go(-1)">Back to last page</a></td>
  </tr>
</table>

<?php }?>
</form>
	<input type = "submit" value = "Cancel&Back" style = "margin-left:600px;" onclick = "javascript:history.go(-1)" />
</body>
</html>